<template>
  <h1>生命周期</h1>
  <div ref="el"></div>
  <button id="count" @click="count++">{{ count }}</button>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, onUnmounted, onBeforeUnmount, onUpdated, onBeforeUpdate } from "vue";
const el = ref()
const count = ref(0)
onBeforeMount(() => {
  // 当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
  console.log('生命周期：onBeforeMount')
  console.log(el.value)
})
onMounted(() => {
  // 在组件挂载完成后执行
  console.log('生命周期：onMounted')
  console.log(el.value)
})
onBeforeUnmount(() => {
  // 在组件实例被卸载之前调用，组件实例依然还保有全部的功能
  console.log('生命周期：onBeforeUnmount')
  console.log(el.value)
})
onUnmounted(() => {
  // 组件实例被卸载之后调用
  console.log('生命周期：onUnmounted')
  console.log(el.value)
})
onBeforeUpdate(() => {
  // 在组件即将因为响应式状态变更而更新其 DOM 树之前调用
  console.log('生命周期：onBeforeUpdate')
  console.log(document.getElementById('count').textContent)
})
onUpdated(() => {
  // 在组件因为响应式状态变更而更新其 DOM 树之后调用
  console.log('生命周期：onUpdated')
  console.log(document.getElementById('count').textContent)
})


</script>

<style scoped>
#count{
  width: 50px;
  text-align: center;
}
</style>